"use client";

/**
 * /w/:workspace/settings/permissions — access reference.
 *
 * The server resolves the effective level (apps/api/src/lib/authorize.ts) as:
 *   baseline from the workspace role (ROLE_LEVEL) MAXED with the most-specific
 *   per-resource `Permission` grant for the caller.
 *
 * Role → baseline level (ROLE_LEVEL):
 *   OWNER → FULL_ACCESS, ADMIN → FULL_ACCESS, MEMBER → EDIT, GUEST → VIEW
 * Levels: NONE < VIEW < COMMENT < EDIT < FULL_ACCESS.
 *
 * IMPORTANT (flagged to the core agent): there are NO REST endpoints to list,
 * create, or delete per-resource `Permission` rows — they are enforced
 * server-side only and not yet surfaced in an API. So this page is a read-only
 * reference of the real model + the role→level matrix, not an editor. When a
 * permissions API is added, the grant editor can be built on top of this layout.
 */
import { useParams } from "next/navigation";
import { ShieldCheck, Info } from "lucide-react";
import { useWorkspace } from "@/hooks/use-workspace";
import { SettingsShell, Section } from "@/components/settings/settings-shell";

const LEVELS = ["NONE", "VIEW", "COMMENT", "EDIT", "FULL_ACCESS"] as const;

const LEVEL_DESC: Record<string, string> = {
  NONE: "No access.",
  VIEW: "Can read content.",
  COMMENT: "Can view and comment.",
  EDIT: "Can view, comment, and edit content.",
  FULL_ACCESS: "Can view, comment, edit, share, and manage settings."
};

const ROLE_LEVEL: { role: string; level: string }[] = [
  { role: "OWNER", level: "FULL_ACCESS" },
  { role: "ADMIN", level: "FULL_ACCESS" },
  { role: "MEMBER", level: "EDIT" },
  { role: "GUEST", level: "VIEW" }
];

export default function SettingsPermissionsPage() {
  const params = useParams<{ workspace: string }>();
  const slugOrId = params?.workspace ?? "";
  const { data: ws } = useWorkspace(slugOrId);

  const currentRole = (ws?.role ?? "").toUpperCase();

  return (
    <SettingsShell
      title="Permissions"
      description="How access is resolved in this workspace."
      active="permissions"
    >
      <div className="space-y-5">
        <Section title="Access levels">
          <ul className="space-y-1">
            {LEVELS.map((lvl) => (
              <li key={lvl} className="flex items-start gap-2 text-sm">
                <span className="w-24 shrink-0 rounded bg-muted px-1.5 py-0.5 text-center text-[11px] font-medium text-muted-foreground">
                  {lvl}
                </span>
                <span className="text-muted-foreground">{LEVEL_DESC[lvl]}</span>
              </li>
            ))}
          </ul>
        </Section>

        <Section title="Role → baseline access">
          <div className="overflow-x-auto">
            <table className="w-full text-sm">
              <thead>
                <tr className="text-left text-xs text-muted-foreground">
                  <th className="py-1 pr-4 font-medium">Role</th>
                  <th className="py-1 pr-4 font-medium">Baseline level</th>
                </tr>
              </thead>
              <tbody>
                {ROLE_LEVEL.map((r) => (
                  <tr key={r.role} className="border-t border-border">
                    <td className="py-1.5 pr-4">
                      <span className="inline-flex items-center gap-1.5">
                        <span className="capitalize">{r.role}</span>
                        {currentRole === r.role ? (
                          <span className="rounded-full bg-primary/15 px-1.5 py-0.5 text-[10px] text-primary">you</span>
                        ) : null}
                      </span>
                    </td>
                    <td className="py-1.5 pr-4">
                      <span className="rounded bg-muted px-1.5 py-0.5 text-[11px] font-medium text-muted-foreground">{r.level}</span>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
          <p className="mt-2 text-xs text-muted-foreground">
            Your effective level on any resource is the <em>maximum</em> of your role's baseline level and the most
            specific per-resource grant that applies.
          </p>
        </Section>

        <Section title="Per-resource permissions">
          <div className="flex items-start gap-2 rounded-md border border-dashed border-border p-3 text-sm text-muted-foreground">
            <Info className="mt-0.5 size-4 shrink-0" aria-hidden />
            <div>
              <p>
                Fine-grained grants (per page, database, teamspace, or record, for a specific user or team) are
                enforced server-side. A management surface for these grants isn't exposed in the API yet, so they
                can't be edited here.
              </p>
              <p className="mt-1 flex items-center gap-1.5">
                <ShieldCheck className="size-3.5" aria-hidden /> All checks are authoritative on the server; the client
                never trusts its own role.
              </p>
            </div>
          </div>
        </Section>
      </div>
    </SettingsShell>
  );
}